<template>
    <div>
        <!-- 网页头部 -->
        <el-card class="head-card">
            <i class="el-icon-s-fold"></i><span style="">大健康综合管理后台</span>
            <h2>商品管理</h2>

        </el-card>

        <!-- 网页中部 -->
        <el-card class="body-card">
            <h4 style="margin-top: 0">查询条件</h4>
            <el-form :inline="true" :model="condition" class="demo-form-inline">
                <el-form-item label="关键字搜索">
                    <el-input v-model="condition.keyword" placeholder="请输入内容"
                              style="padding-right:30px;margin-right: 30px"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button @click="resetting">重置</el-button>
                    <el-button type="primary" @click="queryCommodity">查询</el-button>


                    <!--                    <el-button type="primary" plain @click="search">高级查询</el-button>-->
                    <el-button type="primary" plain @click="centerDialogVisible = true">高级筛选</el-button>
                </el-form-item>
            </el-form>

            <el-dialog
                    title="高级筛选"
                    :visible.sync="centerDialogVisible"
                    width="40%"
                    center>
                            <span>
                                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                                    <el-form-item label="商品分类">

                                        <el-select v-model="formInline.categoryId" clearable placeholder="请选择">
                                            <el-option
                                                    v-for="item in categoryNameList"
                                                    :key="item.id"
                                                    :label="item.categoryName"
                                                    :value="item.id">
                                            </el-option>
                                        </el-select>

                                      </el-form-item>

                                    <el-form-item label="状态">
                                        <el-select v-model="formInline.status" placeholder="请输入商品状态">
                                          <el-option label="已上架" value="1"></el-option>
                                          <el-option label="审核未通过" value="-1"></el-option>
                                        </el-select>
                                      </el-form-item>
                                      <el-form-item label="商品名称">
                                        <el-input v-model="formInline.name" placeholder=""></el-input>
                                      </el-form-item>
                                      <el-form-item label="商品编号">
                                        <el-input v-model="formInline.code" placeholder=""></el-input>
                                      </el-form-item>
                                      <el-form-item label="价格">
                                        <el-input-number v-model="formInline.lowPrice" controls-position="right"
                                                         @change="handleChange"
                                                         :min="0" :max="999999"></el-input-number>
                                      </el-form-item>
                                    <el-form-item label="至">
                                        <el-input-number v-model="formInline.highPrice" controls-position="right"
                                                         @change="handleChange"
                                                         :min="0" :max="999999"></el-input-number>
                                      </el-form-item>
                                    
                                    </el-form>
                                </span>
                <span slot="footer" class="dialog-footer">
                                <el-button @click="centerDialogVisible = false">取 消</el-button>
                                <el-button type="primary" @click="ExeAdvancedQuery">查 询</el-button>
                            </span>
            </el-dialog>
        </el-card>

        <!-- 网页底部 -->
        <el-card class="foot-card">
            <span>
                <el-button type="primary" icon="el-icon-plus"
                           style="padding-left: 30px; padding-right: 30px;  margin-right:30px ">新增</el-button>
                <el-button type="primary" plain
                           style="padding-left: 35px; padding-right: 35px;  margin-right:30px ">下架</el-button>
            </span>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="全部" name="first">

                </el-tab-pane>
                <el-tab-pane label="已上架" name="second">
                    <el-table
                            ref="multipleTable"
                            :data="tableData"
                            tooltip-effect="dark"
                            style="width: 100%"
                            @selection-change="handleSelectionChange">
                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column prop="id" label="商品ID"></el-table-column>

                        <el-table-column prop="name" label="商品名称">
                            <template scope="scope">
                                <span v-html="scope.row.name"></span>
                            </template>
                        </el-table-column>

                        <!--                <p><span v-html="this.name"></span></p>-->

                        <!--                        <el-table-column prop="categoryName"  label="商品分类"></el-table-column>-->

                        <el-table-column prop="img" label="商品图片" :src="img">
                            <template scope="scope">
                                <el-image :src="scope.row.img" style="width: 100px; height: 100px;"></el-image>
                            </template>
                        </el-table-column>


                        <el-table-column prop="title" label="商品标题">
                            <template scope="scope">
                                <span v-html="scope.row.title"></span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="code" label="商品编码"></el-table-column>
                        <el-table-column prop="price" label="商品价格"></el-table-column>
                        <el-table-column prop="stock" label="商品库存"></el-table-column>


                        <!--                        <el-table-column prop="details" label="详情介绍"></el-table-column>-->

                        <el-table-column prop="details" label="详情介绍" width="200">
                            <template slot-scope="scope">
                                <!-- 新增鼠标移动到名称位置显示全部 -->
                                <el-popover placement="top-start" width="350" trigger="hover">
                                    <!-- 详情 -->
                                    <slot>{{scope.row.details}}</slot>
                                    <!-- 内容和过滤-->
                                    <el-button slot="reference" type="text">{{ellipsis(scope.row.details)}}</el-button>
                                </el-popover>
                            </template>
                        </el-table-column>


                        <el-table-column prop="status" label="商品状态">
                            <template slot-scope="scope">
                                <el-tag plain
                                        :type="scope.row.status === 1 ? 'success' : (scope.row.status === 0 ? 'info' : 'danger')">
                                    {{ scope.row.status === 1 ? '已上架' : (scope.row.status === 0 ? '已下架' : '审核不通过') }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button @click="viewCommodity(scope.$index)" type="text" size="small">查看</el-button>
                                <el-button @click="editCommodity(scope.$index)" type="text" size="small">编辑</el-button>
                                <el-button @click="deleteCommodity(scope.$index)" type="danger" size="small">删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="审核未通过" name="third"></el-tab-pane>
            </el-tabs>


            <!-- 分页 -->
            <el-pagination style="margin-top: 10px;"
                           background
                           :page-sizes="[5, 10, 20]"
                           :page-size="pageBean.size"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="pageBean.count"
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="pageBean.current">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "Commodity",
        data() {
            return {

                formInline: {
                    name: '',
                    categoryId: '',
                    status: '',
                    code: '',
                    lowPrice: '',
                    highPrice: '',

                },
                categoryNameList: [],

                // 搜索对象
                condition: {
                    keyword: ''
                },


                // formInline: {
                //     user: '',
                //     region: ''
                // },

                lowPrice: 1,
                highPrice: 1,
                img: '',

                activeName: 'second',
                pageBean: {},

                input: '',
                centerDialogVisible: false,

                pageNum: 1,
                pageSize: 5,
                name: '',
                total: 0,
                //表格数据
                tableData: [],
                //复选框
                multipleSelection: []
            }

        },
        methods: {
            //显示内容的方法
            ellipsis(value) {
                //没有值，返回空字符串
                if (!value) return ''
                //长度大于20就，取前面一部分
                if (value.length > 20) {
                    return value.slice(0, 20) + '...'
                }
                return value
            },

            resetting() {
                this.keyword = ''
                this.queryTopList();
            },
            ExeAdvancedQuery() {
                this.search();
                // this.onSubmit();
                this.centerDialogVisible = false;
                this.formInline = {};

            },
            // onSubmit() {
            //     this.$axios.post('/commodity/AdvancedQuery', this.formInline)
            //         .then(resp => {
            //             this.tableData = resp.data.data.records; // 将查询结果存储在tableData中以供后续使用
            //         })
            //         .catch(error => {
            //             console.error(error); // 可选：在控制台打印错误信息以进行调试。
            //         });
            // },

            search() {
                // 将查询条件封装到请求体中
                let advancedQuery = this.formInline;
                console.log('advancedQuery', advancedQuery)
                // debugger;

                // 发起请求
                this.$axios.post('/commodity/AdvancedQuery', {
                    name: advancedQuery.name,
                    categoryId: advancedQuery.categoryId,
                    status: advancedQuery.status,
                    code: advancedQuery.code,
                    lowPrice: advancedQuery.lowPrice,
                    highPrice: advancedQuery.highPrice,
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                }).then(resp => {
                    console.log("查询成功", resp);
                    // this.total = resp.data.data.total;
                    // this.tableData = resp.data.data.list;
                    // this.tableData = {}
                    this.total = resp.data.data.total;
                    this.tableData = resp.data.data.records;
                })

            },

            // search() {
            //
            //     this.$axios.post('/commodity/AdvancedQuery', this.formInline)
            //         .then(resp => {
            //             this.tableData = resp.data.data.list;
            //             this.total = resp.data.data.total;
            //             // this.tableData = resp.data; // 假设你有一个名为tableData的数据属性来显示查询结果。
            //         })
            //         .catch(error => {
            //             console.error(error);
            //         });
            // },

            queryCommodity() {
// 异步请求后台，通过es完成索引库搜索
                this.$axios.get('/commodity/search', {
                    params: {
                        keyword: this.condition.keyword,
                        pageNum: this.pageNum,
                        pageSize: this.pageSize
                    }
                }).then(resp => {

                    this.tableData = resp.data.data.list;
                    this.total = resp.data.data.total;

                })
            },


            findAllCategoryName() {
                this.$axios.get('/category/findAllCategoryName').then(resp => {
                    // 将服务器返回的数据解析并赋值给 options 数组
                    this.categoryNameList = resp.data.data;
                }).catch(error => {
                    console.error(error);
                });
            },

            queryTopList() {
                this.$axios.get('/commodity/top5List').then(resp => {
                    this.pageSize = 5
                    this.pageNum = 1
                    this.tableData = resp.data.data;
                })
            },
            reloadData() {
                this.$axios.get("/commodity/findAllCommodityByName", {
                    params: {
                        pageSize: this.pageSize,
                        pageNum: this.pageNum,
                        name: this.name
                    }
                }).then(res => {
                    console.log("", res);
                    this.tableData = {}
                    this.total = res.data.data.total;
                    this.tableData = res.data.data.records;
                })
            },


            // //通过es完成索引库的搜索
            // queryCommodity() {
            //     // 跳转道搜索页面 search.html
            //     // location.href = '/commodity/toSearch?keyword=' + this.condition.keyword;
            // },

            viewCommodity(index) {
                // 处理查看按钮点击事件，可以根据索引获取对应商品的信息并进行展示  
                console.log('查看', this.tableData[index]);
            },
            editCommodity(index) {
                // 处理编辑按钮点击事件，可以根据索引获取对应商品的信息并进行编辑操作  
                console.log('编辑', this.tableData[index]);
            },
            deleteCommodity(index) {
                // 处理删除按钮点击事件，可以删除对应商品的信息  
                console.log('删除', this.tableData[index]);
            },

            handleChange(value) {
                console.log(value);
            },

            handleClick(tab, event) {
                console.log(tab, event);
            },

            handleSizeChange(val) {
                this.pageSize = val;
                this.reloadData();
            },
            handleCurrentChange(val) {
                this.pageNum = val;
                this.reloadData();
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
        },
        created() {
            this.queryTopList();
            this.findAllCategoryName();
            // this.reloadData();
        }
    }
</script>

<style scoped>
    .head-card {
        text-align: left;
        height: 200px;

    }

    .el-icon-s-fold {
        font-size: 23px;
        margin-right: 10px;
        margin-bottom: 40px;
    }

    .body-card {
        text-align: left;
        padding-left: 18px;
        width: 100%;
        display: block;
        margin: 30px auto;
        height: 130px;
        padding-bottom: 20px;
    }

    .foot-card {
        text-align: left;
        padding-left: 18px;
        width: 100%;
        display: block;
        margin: 0 auto;
    }

    .el-button {

    }
</style>